<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图表</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/style.css" />

    <style>
      .chart {
        width: 600px;
        margin: 50px auto;
      }
    </style>
  </head>
  <body>
    <div id="map" class="chart">
    </div>
    
    <script src="./js/g2.min.js"></script>
    <script src="./js/data-set.min.js"></script>
    <!-- <script src="./js/app.js"></script> -->
    <script>

function createMap(id, dv) {
    var chart = new G2.Chart({
      container: id,
      forceFit: true,
      height: 500,
      padding: 0
    });
    chart.scale({
      latitude: { sync: true, nice: false },
      longitude: { sync: true, nice: false }
    });

    chart.tooltip({
      showTitle: false,
      itemTpl: "<span>{name}: {value}</span>"
    });

    chart.legend(false);
    chart.axis(false);
    chart.tooltip(false);
    var cdv = chart
      .view()
    cdv.source(dv)
      cdv
      .polygon()
      .position("longitude*latitude")
      .tooltip("name*value", (name, value) => ({ name, value }))
      .color("value", value => {
        console.log(value);
        if (value < 400) {
          return "#4caf50";
        } else if (value < 700) {
          return "#cddc39";
        } else if (value < 1000) {
          return "#ff9800";
        } else {
          return "#ff5722";
        }
      })
      .label("name", {
        offset: 0,
        textStyle: {
          fontSize: 10,
          fill: "#fff"
        }
      })
      .style({
        fill: "#DDDDDD",
        stroke: "#b1b1b1",
        lineWidth: 0.5,
        fillOpacity: 0.85
      });

    // const userView = chart.view();
    // userView.source(userData);
    // userView.heatmap()
    //   .position('longitude*latitude')
    //   .color('value', '#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C2')
    //   .size(500 / 20)
    //   .style({
    //     blur: 500 / 15
    //   });
    return chart;
  }

fetch('./js/data/china.full.geo.json')
  .then(res => res.json())
  .then(GeoJSON => {
    var geoDv = new DataSet.View().source(GeoJSON, {
      type: 'GeoJSON'
    }).transform({
      type: 'map',
      callback(row) {
       
        row.value = Math.random() * 1500 >>> 0
        return row;
      }
    });

    window.$dv = geoDv
    window.$chart = createMap('map' ,geoDv)

    window.$chart.render();
    


    // const chart = new G2.Chart({
    //   container: 'map',
    //   forceFit: true,
    //   height: 500,
    //   padding: 0
    // });
    // chart.scale({
    //   latitude: { sync: true, nice: false },
    //   longitude: { sync: true, nice: false }
    // });
    // // chart.legend(false);
    // // chart.axis(false);
    // // chart.tooltip(false);

    // chart.tooltip({
    //   showTitle: false,
    //               itemTpl: '<span>{name}: {value}</span>'
    //             });
    // const geoView = chart.view();
    // geoView.source(geoDv);
    // geoView.polygon()
    //   .position('longitude*latitude')
    //   .tooltip('name*value', (name, value) => ({name,value}))
    //   .color('value', value => {
    //     console.log(value)
    //     if( value < 400) {
    //       return '#4caf50'
    //     } else if (value < 700) {
    //       return '#cddc39'
    //     }  else if (value < 1000) {
    //       return '#ff9800'
    //     } else {
    //       return '#ff5722'
    //     }
    //   })
    //   .label('name', {
    //     offset: 0,
    //     textStyle: {
    //       fontSize: 10,
    //       fill: '#fff'
    //     }
        
    //   })
    //   .style({
    //     fill: '#DDDDDD',
    //     stroke: '#b1b1b1',
    //     lineWidth: 0.5,
    //     fillOpacity: 0.85
    //   });

    // // const userView = chart.view();
    // // userView.source(userData);
    // // userView.heatmap()
    // //   .position('longitude*latitude')
    // //   .color('value', '#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C2')
    // //   .size(500 / 20)
    // //   .style({
    // //     blur: 500 / 15
    // //   });
    // chart.render();
  });

    </script>
  </body>
</html>
